<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="李艺江">
<title>问卷数据统计查看</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/pages/css/histogram.css">
<script
	src='${pageContext.request.contextPath }/pages/js/jquery-3.2.1.min.js'></script>
<script src="${pageContext.request.contextPath }/pages/js/histogram.js"></script>
<style>
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

a {
	text-decoration: none;
	padding-left: 2px
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
}

.header {
	position: relative;
	width: 100%;
	height: 15%;
	background-color: #66CC00;
}

.divide {
    width:100%;
	height: 1%;
	background-color: #DDDDDD;
}

.content {
	position: relative;
	width: 100%;
	height: 68%;
}

.content-left {
	width: 15%;
	height: 600px;
	float: left;
	background-color: #66CC00;
}

.content-right {
	width: 85%;
	height: 600px;
	float: left;
	background:
		url(${pageContext.request.contextPath }/pages/image/background.jpg);
}

.title {
	text-align: center;
}

.title font {
	font-size: 40px;
}

.user {
	text-align: right;
}

.user font {
	font-size: 20px;
}

.content-left div {
	width: 90%;
	background-color: #FFFFFF;
}

.content-left div li {
	height: 25px;
	background-color: #FFFFFF;
}

.table {
	width: 100%;
	padding-left: 25%;
}

.table table {
	border-collapse: collapse;
	background-color: #FFFFFF
}

.question {
	height: 50px;
	text-align: center;
	font-size: 50px
}

.options{
	height: 30px;
	text-align: center;
	font-size: 30px
}

.col1 {
	border: solid #66CC00;
	border-width: 2px;
	width: 200px;
	text-align: center;
}

.col2 {
	border: solid #66CC00;
	border-width: 2px;
	width: 240px;
	text-align: center;
}

.col3 {
	border: solid #66CC00;
	border-width: 2px;
	width: 240px;
	text-align: center;
}

.col4 {
	border: solid #66CC00;
	border-width: 2px;
	width: 240px;
	text-align: center;
}

.col5 {
	border: solid #66CC00;
	border-width: 2px;
	width: 240px;
	text-align: center;
}

.optionA {
	font-size: 20px;
	padding-left: 10%;
}

.optionB {
	font-size: 20px;
	padding-left: 15%;
}

.optionC {
	font-size: 20px;
	padding-left: 15%;
}

.optionD {
	font-size: 20px;
	padding-left: 15%;
}
</style>

</head>
<body>
	<div class=container>
		<div class="header">
			<div class="title">
				<br /> <font>问卷调研管理系统</font>
			</div>
			<div class="user">
				<font>欢迎您:admin&nbsp;&nbsp;</font>
			</div>
		</div>
		<div class="divide">
		
		</div>
		<div class="content">
			<div class="content-left">
				<ul>
					<li>调查课题管理
						<div>
							<ul>
								<li><a href="admin_allQuestionnaires.action?x=x">调查课题管理</a></li>
								<li><a href="admin_send.action?page=aq">添加新课题</a></li>
							</ul>
						</div>
					</li>
					<li>留言信息管理
						<div>
							<ul>
								<li><a href="admin_allMessages.action?x=x">留言信息管理</a></li>
							</ul>
						</div>
					</li>
					<li>注册用户管理
						<div>
							<ul>
								<li><a href="admin_allUsers.action?x=x">注册用户管理</a></li>
							</ul>
						</div>
					</li>
					<li>调查记录查询
						<div>
							<ul>
								<li><a href="admin_allQuestionnaires.action?x=x">调查记录查询</a></li>
							</ul>
						</div>
					</li>
					<li>修改个人密码
						<div>
							<ul>
								<li><a href="admin_send.action?page=cp">修改个人密码</a></li>
							</ul>
						</div>
					</li>
					<li>退出登录
						<div>
							<ul>
								<li><a href="login_logout.action?x=x">退出登录</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			<div class="content-right">
				<br />
				<div class="question">
					<font>${requestScope.question.content }？选择统计</font>
				</div>
				<br/>
				<div class="options">
					<font>A:${requestScope.question.optionA.content }</font>&nbsp;
					<font>B:${requestScope.question.optionB.content }</font>&nbsp;
					<font>C:${requestScope.question.optionC.content }</font>&nbsp;
					<font>D:${requestScope.question.optionD.content }</font>
				</div>
				<div class="table">
					<div class="left">
						<table style="display: none">
							<tbody>
								<tr>
									<td>A</td>
									<c:choose>
									  <c:when test="${requestScope.question.recordsCount eq 0 }">
									    <td>0%</td>
									  </c:when>
									  <c:otherwise>
									    <td><fmt:formatNumber type="number" value="${requestScope.question.optionA.recordsCount /  requestScope.question.recordsCount * 100}" maxFractionDigits="0"/>%</td>
									  </c:otherwise>
									</c:choose>
									<td style="background-color: #336699">&nbsp;</td>
								</tr>
								<tr>
									<td>B</td>
									<c:choose>
									  <c:when test="${requestScope.question.recordsCount eq 0 }">
									    <td>0%</td>
									  </c:when>
									  <c:otherwise>
									    <td><fmt:formatNumber type="number" value="${requestScope.question.optionB.recordsCount /  requestScope.question.recordsCount * 100}" maxFractionDigits="0"/>%</td>
									  </c:otherwise>
									</c:choose>
									<td style="background-color: #003366">&nbsp;</td>
								</tr>
								<tr>
									<td>C</td>
									<c:choose>
									  <c:when test="${requestScope.question.recordsCount eq 0 }">
									    <td>0%</td>
									  </c:when>
									  <c:otherwise>
									    <td><fmt:formatNumber type="number" value="${requestScope.question.optionC.recordsCount /  requestScope.question.recordsCount * 100}" maxFractionDigits="0"/>%</td>
									  </c:otherwise>
									</c:choose>
									<td style="background-color:#ff6600">&nbsp;</td>
								</tr>
								<tr>
									<td>D</td>
									<c:choose>
									  <c:when test="${requestScope.question.recordsCount eq 0 }">
									    <td>0%</td>
									  </c:when>
									  <c:otherwise>
									    <td><fmt:formatNumber type="number" value="${requestScope.question.optionD.recordsCount /  requestScope.question.recordsCount * 100}" maxFractionDigits="0"/>%</td>
									  </c:otherwise>
									</c:choose>
									<td style="background-color: #ffcc00">&nbsp;</td>
								</tr>
							</tbody>
						</table>
						<div class="button" onclick="viewGraph()" style="display: none">Rerun</div>
					</div>
					<div class="left">
						<div id="grafico">
							<div class="riga" style="top: 25%">
								<div>75%</div>
							</div>
							<div class="riga" style="top: 50%">
								<div>50%</div>
							</div>
							<div class="riga" style="top: 75%">
								<div>25%</div>
							</div>
							<div id="col0" style="left: 0; background-color: #336699;"
								class="column"></div>
							<div id="col1" style="left: 25%; background-color: #003366;"
								class="column"></div>
							<div id="col2" style="left: 50%; background-color: #ff6600;"
								class="column"></div>
							<div id="col3" style="left: 75%; background-color: #ffcc00;"
								class="column"></div>
						</div>
						<font class="optionA">A选项</font> <font class="optionB">B选项</font>
						<font class="optionC">C选项</font> <font class="optionD">D选项</font>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>